<div class="po-grid-wrapper po-grid-row-wrapper" #wrapper>
  @if (logger) {
    <div>
      lastCell: {{ lastCell }} | currencyCell: {{ currencyCell }} <br />
      lastRow: {{ lastRow }} | currencyRow: {{ currencyRow }} <br />
      lastColumn: {{ lastColumn }} | currencyColumn: {{ currencyColumn }} <br />
      <hr />
      currencyObj: {{ currencyObj | json }}
      <hr />
    </div>
  }

  <div class="po-grid">
    <div class="po-grid-body">
      <div
        class="po-grid-row"
        #table
        (keydown.arrowup)="tableKeydown($event, 'up')"
        (keydown.arrowdown)="tableKeydown($event, 'down')"
        (keydown.arrowleft)="tableKeydown($event, 'left')"
        (keydown.arrowright)="tableKeydown($event, 'right')"
        (keydown.tab)="tableKeydown($event, 'next')"
        (keydown.shift.tab)="tableKeydown($event, 'prior')"
        (click)="tableClick($event)"
        (contextmenu)="tableClick($event)"
        (dblclick)="tableClick($event)"
      >
        @if (freezeColumns.length > 0) {
          <div class="po-grid-cell po-grid-cell-freeze">
            <ng-container *ngTemplateOutlet="divFreezeColumns"></ng-container>
          </div>
        }

        <div
          class="po-grid-cell po-grid-cell-normal"
          [style.width]="width"
          [style.max-width]="width"
          [style.min-width]="width"
        >
          <ng-container *ngTemplateOutlet="divColumns"></ng-container>
        </div>

        @if (actionColumns.length > 0) {
          <div class="po-grid-cell po-grid-cell-action">
            <ng-container *ngTemplateOutlet="divActionColumns"></ng-container>
          </div>
        }
      </div>
    </div>
  </div>
</div>

<!-- Coluna com as colunas congeladas -->
<ng-template #divFreezeColumns>
  <div class="po-grid po-grid-freeze">
    <div class="po-grid-header-group">
      <div class="po-grid-row">
        @for (column of freezeColumns; track column; let i = $index) {
          <po-grid-head
            class="po-grid-title"
            [style.width]="column.cssWidth"
            [style.max-width]="column.cssWidth"
            [style.min-width]="column.cssWidth"
            p-freeze="true"
            p-position="{{ '0-' + i }}"
            [p-width]="column.width"
            [p-align]="column.align"
            [p-title]="column.label"
          >
          </po-grid-head>
        }
      </div>
    </div>

    <div class="po-grid-body">
      @for (row of data; track row; let j = $index) {
        <div
          class="po-grid-row"
          (keydown.control.delete)="removeRow($event, row)"
          (keydown.esc)="cancelRow($event, row)"
        >
          @for (column of freezeColumns; track column; let i = $index) {
            <po-grid-cell
              class="po-grid-cell"
              [style.width]="column.cssWidth"
              [style.max-width]="column.cssWidth"
              [style.min-width]="column.cssWidth"
              p-freeze="true"
              [p-align]="column.align"
              [p-readonly]="column.readonly"
              [p-required]="column.required"
              p-position="{{ j + 1 + '-' + i }}"
              [p-width]="column.width"
              [(p-value)]="row[column.property]"
            >
            </po-grid-cell>
          }
        </div>
      }
    </div>
  </div>
</ng-template>
<!-- FIM: Coluna com as colunas congeladas -->

<!-- Coluna com as colunas nornais -->
<ng-template #divColumns>
  <div class="po-grid po-grid-normal">
    <div class="po-grid-header-group">
      <div class="po-grid-row">
        @for (column of columns; track column; let i = $index) {
          <po-grid-head
            class="po-grid-title"
            [style.width]="column.cssWidth"
            [style.max-width]="column.cssWidth"
            [style.min-width]="column.cssWidth"
            [p-align]="column.align"
            p-position="{{ '0-' + (i + freezeColumns.length) }}"
            [p-title]="column.label"
            [p-width]="column.width"
          >
          </po-grid-head>
        }
      </div>
    </div>

    <div class="po-grid-body">
      @for (row of data; track row; let j = $index) {
        <div
          class="po-grid-row"
          (keydown.control.delete)="removeRow($event, row)"
          (keydown.esc)="cancelRow($event, row)"
        >
          @for (column of columns; track column; let i = $index) {
            <po-grid-cell
              class="po-grid-cell"
              [style.width]="column.cssWidth"
              [style.max-width]="column.cssWidth"
              [style.min-width]="column.cssWidth"
              [p-align]="column.align"
              [p-readonly]="column.readonly"
              [p-required]="column.required"
              p-position="{{ j + 1 + '-' + (i + freezeColumns.length) }}"
              [(p-value)]="row[column.property]"
              [p-width]="column.width"
            >
            </po-grid-cell>
          }
        </div>
      }
    </div>
  </div>
</ng-template>
<!-- FIM: Coluna com as colunas nornais -->

<!-- Coluna com as colunas de ação -->
<ng-template #divActionColumns>
  <div class="po-grid po-grid-actions">
    <div class="po-grid-header-group">
      <div class="po-grid-row">
        @for (column of actionColumns; track column; let i = $index) {
          <po-grid-head
            class="po-grid-title"
            p-position="{{ '0-' + (i + freezeColumns.length + columns.length) }}"
            [p-title]="column.label"
            [p-align]="column.align"
          >
          </po-grid-head>
        }
      </div>
    </div>

    <div class="po-grid-body">
      @for (row of data; track row; let j = $index) {
        <div
          class="po-grid-row"
          (keydown.control.delete)="removeRow($event, row)"
          (keydown.esc)="cancelRow($event, row)"
        >
          @for (column of actionColumns; track column; let i = $index) {
            <po-grid-cell-action
              class="po-grid-cell"
              p-position="{{ j + 1 + '-' + (i + freezeColumns.length + columns.length) }}"
              [p-value]="row[column.property]"
            >
            </po-grid-cell-action>
          }
        </div>
      }
    </div>
  </div>
</ng-template>
<!-- FIM: Coluna com as colunas de ação -->
